<div class="main">
  <div class="tools-header">
    <button class="openModalBtn">Add New Student</button>
    <div>
      <input type="text" name="keyword" class="keyword" placeholder="Search by name">
      <button type="button" class="searchBtn">Search</button>
    </div>
  </div>

  <table class="studentTable">
    <thead>
      <tr>
        <th><input type="checkbox" class="selectAll"></th>
        <th>ID</th>
        <th>Name</th>
        <th>Gender</th>
        <th>Hobbies</th>
        <th>Email</th>
        <th>Phone</th>
        <th>Age</th>
        <th>Created At</th>
        <th>Updated At</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <!-- Student rows will be added dynamically here -->
    </tbody>
  </table>

  <!-- Modal for adding/editing students -->
  <div class="studentModal modal">
    <div class="modal-content">
      <h3 class="modalTitle">Add New Student</h3>
      <form class="studentForm">
        <input type="hidden" class="studentIdToEdit">

        <label for="studentName">Name</label>
        <input type="text" name="name" class="studentName" required>

        <label for="studentGender">Gender</label>
        <select name="gender" class="studentGender" required>
          <option value="Male">Male</option>
          <option value="Female">Female</option>
        </select>

        <label for="studentHobbies">Hobbies</label>
        <input type="text" name="hobbies" class="studentHobbies" required>

        <label for="studentEmail">Email</label>
        <input type="email" name="email" class="studentEmail" required>

        <label for="studentPhone">Phone</label>
        <input type="text" name="phone" class="studentPhone" required>

        <label for="studentAge">Age</label>
        <input type="number" name="age" class="studentAge" required>

        <button type="submit" class="saveStudentBtn">Save Student</button>
      </form>
    </div>
  </div>
</div>